<template>
  <div class="ele-full-screen">
    <i
      v-if="isFull"
      class="ele-icon ele-icon-fullscreen-expand"
      @click="full(1)"
    />
    <i
      v-else
      class="ele-icon ele-icon-fullscreen-shrink"
      @click="full(2)"
    />
  </div>
</template>
<script setup lang="ts">
import { ref } from '@vue/runtime-core'

const isFull = ref(true)

const full = function (num: number) {
  num = num || 1
  num = num * 1
  let docElm: any
  docElm = document.documentElement
  switch (num) {
    case 1:
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen()
      } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen()
      } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen()
      } else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen()
      }
      break
    case 2:
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if ((document as any).mozCancelFullScreen) {
        (document as any).mozCancelFullScreen()
      } else if ((document as any).webkitCancelFullScreen) {
        (document as any).webkitCancelFullScreen()
      } else if ((document as any).msExitFullscreen) {
        (document as any).msExitFullscreen()
      }
      break
  }
  isFull.value = !isFull.value
}
</script>
